/*
 * @Description: 全宗表格组件
 * @Author: Rfan
 * @Date: 2022-05-30 14:43:58
 * @LastEditTime: 2022-09-08 15:02:13
 */

import { useMemo, useState } from 'react';
import { Alert } from 'antd';
import classNames from 'classnames/bind';
import ATLevelNav from '@/components/ATLevelNav';
import InheritListPane from './InheritListPane';
import { useMetadataRelyContext } from '../contexts/MetadataRelyContext';
import styles from '../styles/list.module.scss';

const cx = classNames.bind(styles);

const PageContent = () => {
  const { selectFond, setSelectAT, setSelectLevel } = useMetadataRelyContext();
  const [title, setTitle] = useState<string>('');
  const [query, setQuery] = useState({});

  const handleChange = ({ atItem, levelItem }: any) => {
    setSelectAT(atItem);
    setSelectLevel(levelItem);
    setTitle(`${atItem?.atName}-${levelItem?.levelName}`);
    setQuery({
      atType: atItem.atType,
      atCode: atItem.atCode,
      level: levelItem.level
    });
  };

  return (
    <>
      <Alert
        className={cx('tips')}
        description="依赖配置：某一个元数据值依赖另一个元数据值而建立。在进行依赖关系配置时，可以选择同层级或上一个层级的元数据作为依赖对象，并结合规则，构建指定元数据的值。"
        type="info"
        showIcon
      />
      <div className={cx('sort-container')}>
        {useMemo(
          () => (
            <ATLevelNav activeFond={selectFond?.id} onChange={handleChange} />
          ),
          [selectFond]
        )}
        <div className={cx('pane-wrap')}>
          <InheritListPane title={title} data={query} />
        </div>
      </div>
    </>
  );
};

export default PageContent;
